<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<title>图书列表</title>
		<link type="text/css" rel="stylesheet" href="../static/dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="../static/css/index.css">
		<link rel="stylesheet" type="text/css" href="../static/css/animate.css">
	
	</head>
	<body>
		<!--导航部分  begin-->
		<div class="container" style="margin-top: 5px;">
			<nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
				            <span class="sr-only">切换导航</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
        				</button>
						<a class="navbar-brand" href="#">优客书城</a>
					</div>
					<div class="collapse navbar-collapse" id="example-navbar-collapse">
						<ul class="nav navbar-nav pull-left">
							<li>
								<a href="index.html">首页</a>
							</li>
					
							<li style="background-color: #999;">
								</li><li class="dropdown">
									<a style="background-color: #E7E7E7;" class="dropdown-toggle" data-toggle="dropdown">
										图书类型
										<b class="caret"></b>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="books_list.html">精选图书</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="books_list.html">推荐图书</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="books_list.html">特价图书</a>
										</li>
										<li class="divider"></li>
									</ul>
								</li>
							
							<li>
								<a href="#" data-toggle="modal" data-target="#myModal">登录</a>
							</li>
							<li>
								<a href="index.html">安全退出</a>
							</li>
							<li>
								<a href="#" data-toggle="modal" data-target="#register">注册</a>
							</li>
							<li>
								<a href="order_list.html">我的订单</a>
							</li>
							<li>
								<a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"> </span>我的购物车</a>
							</li>
						</ul>
						<div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">
							<input type="text" class="form-control" placeholder="请输入图书名">
							<span class="input-group-btn">  
					            <button class="btn btn-info btn-search">
					            	<span class="glyphicon glyphicon-search"></span>
					            </button>
							</span>
						</div>
					</div>
				</div>
			</nav>
		</div>
		<!--导航部分 end-->
		<!--最顶端轮播图片 begin-->
		<div id="gcarouse" class="container">
			<!--轮播-->
			<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
								<div class="item active">
						<a href="details.html"><img src="../static/images/advert1.jpg" class="pull-left" alt="First slide" th:src="@{/images/advert1.jpg}"></a>
					
					</div>
					<div class="item">
						<a href="details.html"><img src="../static/images/advert2.jpg" class="pull-left" alt="First slide" th:src="@{/images/advert2.jpg}"></a>
						
					</div>
					<div class="item">
						<a href="details.html"><img src="../static/images/advert3.jpg" class="pull-left" alt="First slide" th:src="@{/images/advert3.jpg}"></a>
					
					</div>
				</div>

				<!-- 轮播（Carousel）导航 -->
				<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
			</div>
		</div>
		<!--最顶端轮播图片 end-->
		<div class="container">	
			<ol class="breadcrumb">
			    <li><a href="#">图书列表</a></li>
			    <li><a href="#">精选图书</a></li>
			</ol>
		</div>
		
<!--展示图书数据开始-->
		<div id="bookList"></div>
<!--		展示数据结束-->
		<!--地址-->
		<div class="container">
		<hr>
			<div class="container">
				<div class="row">
					<div class="col-md-offset-2 col-md-8">
						<div class="row">
							<div class="col-md-offset-2 col-md-2">
								<img src="../static/images/logo.png" th:src="@{/images/logo.png}">
							</div>
							<div class="col-md-6" style="margin-top: 10px;">
								<div class="row">
									<div class="col-md-offset-2 col-md-10">
										<a href="http://www.gem-inno.com/">苏州高博应诺信息科技有限公司©所有</a>
									</div>
								</div>
								<div class="gap"></div>
								<div class="row">
									<div class="col-md-offset-2 col-md-10">
										<span class="text-info">高博教育® |&nbsp;</span>
										<span class="text-info"><a href="http://www.xmgc360.com">项目工厂</a> |&nbsp;</span>
										<span class="text-info">2012－2020 </span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end-->

	<script src="../static/dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
	<script src="../static/js/carousel.js" type="text/javascript" charset="utf-8" th:src="@{/js/carousel.js}"></script>
	<script src="../static/dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
	<script src="../static/js/wow.js" th:src="@{/js/wow.js}"></script>


		<script th:inline="javascript">
			//获取路径
			var contextPath=[[${#request.getContextPath()}]];
			var category=[[${category}]];
		</script>
	<script type="text/javascript">
		if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
			new WOW().init();
		};

		$(function () {
			$("#bookList").load(contextPath+"/home/getBookListData",queryData(1,category));
		})

		function queryData(page,category) {
			var query={};
			query.category=category;
			query.page=page;
			return query;
		}

		// 加载其他页的数据
		function loadData(category,page) {
			$("#bookList").load(contextPath+"/home/getBookListData",queryData(page,category));
		}
	</script>
	</body>
</html>
